<template>
  <div>

   <!-- <div class="title">
      <el-col :span="2">
        <h2>标题</h2>
      </el-col>
      <el-col :span="12">
        <el-input v-model="article.title"  placeholder="请输入标题"></el-input>
      </el-col>
      <el-col :span="2">
        <h2>作者</h2>
      </el-col>
      <el-col :span="12">
        <el-input v-model="article.author" placeholder="请输入作者姓名"></el-input>
      </el-col>
    </div>
    <div class="uploadFirstPic">
      <el-upload :action="uploadUrl()" :before-upload="beforeAvatorUpload" :on-success="avatorUploadSuccess">
        <el-button size="mini" type="primary" >上传图片</el-button>
      </el-upload>
    </div>-->

    <div class="container">
      <div class="edit">文章编辑</div>
      <el-row class="form-body">
        <el-form ref="form" :model="loginForm" label-width="0px">
          <el-form-item  class="form-item">
           <h2>标题</h2>
            <el-input placeholder="请输入用户名" v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item class="form-item">
            <h2>作者</h2>
            <el-input placeholder="请输入用户名" v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="demo-image__preview">
              <el-image
                style="width: 100px; height: 100px"
                :src="url"
                :preview-src-list="srcList">
              </el-image>
            </div>
              <el-upload :action="uploadUrl()" :before-upload="beforeAvatorUpload" :on-success="avatorUploadSuccess">
                <el-button size="mini" type="primary" >上传图片</el-button>
              </el-upload>
          </el-form-item>
         <el-form-item>
           <div class="tags">
             <h2>标签</h2>
             <el-select v-model="tagsSelect" multiple placeholder="请选择"  @visible-change="selectValue($event,tagsSelect)">
             <el-option
               v-for="item in tags"
               :key="item.id"
               :label="item.name"
               :value="item.id">
             </el-option>
           </el-select>
           </div>
         </el-form-item>
        </el-form>
      </el-row>
    </div>

    <mavon-editor v-model="article.content"
                  style="min-height: 600px"
                  ishijs="true"
                  codeStyle="code-github"
    ></mavon-editor>
    <div class="button">
      <el-button type="info" round @click="empty">清空</el-button>
      <el-button type="primary" round @click="articleSave">保存</el-button>
    </div>
  </div>
</template>

<script>
    export default {
        name: "ArticleEdit",
        data() {
          return {
            fileList: [],
            article:{
              id:0,
              title:'',
              author:'',
              content: '',
              firstPic:'',
              tags:[],
            },
            newFirstPic:'',
            tags:[],
            tagsAll:[],
            tagsSelect:[],
            loginForm:{
              username:"xinxin",
              password:"123456",
            },
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            srcList: [],
          }
        },
      created() {
        if(this.$route.query.articleId){
          this.loadArticle(this.$route.query.articleId);
          let obj=[];
          for(let item of this.tagsAll){
            console.log(item);
            obj.push(item.id);
          }
          this.tagsSelect=obj;
          console.log(this.tagsSelect);
        }
      },
      methods: {
        loadArticle(id){
          const _this = this;
          this.$axios.get('http://localhost:8888/article/selectArticleById/' + id).then(function (response) {
             console.log(response);
             _this.articleId=response.data.id;
             _this.article=response.data;
             _this.newFirstPic=response.data.firstPic;
           _this.url=_this.getUrl(response.data.firstPic);
            _this.srcList.push(_this.getUrl(response.data.firstPic))
             _this.tagsAll=response.data.tags;
             console.log(_this.tagsAll);
          });
          if(this.$route.query.articleId){
            let _this=this;
            this.$axios.get("http://localhost:8888/tag/selectAllTag").then(function(data){
              console.log(data);
              _this.tags=data.data;
            })
          }
        },
        selectValue(callback,vc){
          console.log("回调函数"+callback);
          if(callback){
            let _this=this;
            this.$axios.get("http://localhost:8888/tag/selectAllTag").then(function(data){
              console.log(data);
              _this.tags=data.data;
            })
          }
          if(!callback){
            console.log(this.tagsSelect)
            this.article.tags=this.tagsSelect;
          }
        },
        beforeAvatorUpload(){
        },
        //上传图片成功之后要做的工作
        avatorUploadSuccess(res){
          console.log(res);
          let _this = this;
          if(res.status == 200){
            console.log(res.object);
            _this.article.firstPic=res.object;
            _this.newFirstPic=res.object;
            _this.$notify({
              title: '上传成功',
              type: 'success'
            });
            _this.loadArticle(_this.article.id)
          }else{
            _this.$notify({
              title: '上传失败',
              type: 'error'
            });
          }
        },
        //根据相对地址获取绝对地址
        getUrl(url){
          return `${this.$store.state.HOST}/${url}`
        },
        //更新Url
        uploadUrl(){
          return `${this.$store.state.HOST}/article/updateFirstPic?id=`+this.article.id
        },
        articleSave(){
            let _this = this;
            var param = new URLSearchParams();
            param.append("id", this.article.id);
            param.append("title", this.article.title);
            param.append("author", this.article.author);
            param.append("content", this.article.content);
            param.append("firstPic", this.article.firstPic);
            param.append("tagIds", this.article.tags);
            if (this.$route.query.articleId) {
              this.$axios.post("http://localhost:8888/article/update", param).then(function (data) {
                if (data.data.status == 200) {
                  _this.$notify({
                    title: '新增文章成功',
                    type: 'success'
                  });
                  _this.$router.push("/articleManage");
                } else {
                  let param = new URLSearchParams();
                  param.append("newFirstPic", _this.newFirstPic);
                  _this.$axios.post("http://localhost:8888/article/deleteNewFirstPic", param).then(function (data) {
                    console.log(data);
                  });
                  _this.newFirstPic = '';
                  _this.$notify({
                    title: '新增文章失败',
                    type: 'error'
                  });
                }
              })
            } else {
              this.$axios.post("http://localhost:8888/article/insert", param).then(function (data) {
                if (data.data.status == 200) {
                  _this.$notify({
                    title: '新增文章成功',
                    type: 'success'
                  });
                  _this.$router.push("/articleManage");
                } else {
                  let param = new URLSearchParams();
                  param.append("newFirstPic", _this.newFirstPic);
                  _this.$axios.post("http://localhost:8888/article/deleteNewFirstPic", param).then(function (data) {
                    console.log(data);
                  });
                  _this.newFirstPic = '';
                  _this.$notify({
                    title: '新增文章失败',
                    type: 'error'
                  });
                }
              })
            }
          },
        empty(){
          this.article.content='';
        }
      }
    }
</script>

<style scoped>
  .uploadFirstPic{
    width: 300px;
    padding-left: 120px;
    padding-bottom: 50px;
  }
  .tags{
    width:300px;
  }
.edit{
  padding-top: 10px;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  padding-bottom: 20px;
}
.title{
  display: inline-block;
  padding-left: 20px;
  width: 1200px;
  padding-bottom: 20px;
}
  .button{
    padding-top: 30px;
    padding-left: 1350px;
    padding-bottom: 30px;
  }
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
  .articleFirstPic{
    width: 100%;
    /* height: 40px;*/
    border-radius: 5px;
    border-bottom: 5px;
    overflow: hidden;
  }
  .container{
    /*background-image: url("../../static/homeMask.png");*/
    background-color: #ebeef0;
  }
  .form-body{
    width: 35%;
    min-width: 300px;
    padding: 30px 30px 15px 30px;
  }
</style>
